15669986063 陈紫添
<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="closeDialog"
      width="width"
      @close="closeDialogFn"
    >
      <div class="container_table_bottom">
        <div class="container_header_row">
          <el-row :gutter="10">
            <!-- <el-col :span="6"
              >【题型】：{{ tableDate.questionType | toQuestionType }}题</el-col
            > -->
            <el-col :span="6">【编号】：{{ tableDate.id }}</el-col>
            <!-- <el-col :span="6"
              >【难度】：{{ tableDate.difficulty | toDifficulty }}</el-col
            > -->
            <el-col :span="6">【标签】：{{ tableDate.tags }}</el-col>
          </el-row>
        </div>
        <div class="container_header_row2">
          <el-row :gutter="10">
            <el-col :span="6">【学科】：{{ tableDate.subjectID }}</el-col>
            <el-col :span="6">【目录】：{{ tableDate.catalogID }}</el-col>
            <el-col :span="6">【方向】：{{ tableDate.direction }}</el-col>
            <el-col :span="6"></el-col>
          </el-row>
        </div>
      </div>
      <hr />
      <div>
        <el-row> 【题干】： </el-row>
        <!-- <el-row v-html="tableDate.question" style="color: blue">
          {{ tableDate.question }}
        </el-row> -->
        <!-- <el-row v-if="tableDate.questionType !== '3'">
          {{ tableDate.questionType | toQuestionType }}题
          选项：（以下选中的选项为正确答案）
        </el-row> -->
        <div v-if="tableDate.questionType === '1'">
          <el-radio-group v-model="isRight">
            <el-radio
              v-for="item of tableDate.options"
              :label="item.isRight"
              :key="item.id"
              class="radio_div"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
        </div>
        <div v-else-if="tableDate.questionType === '2'">
          <el-checkbox-group v-model="isRight">
            <el-checkbox
              v-for="item in tableDate.options"
              :label="item.isRight"
              :key="item.id"
              class="radio_div"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div v-else></div>
      </div>
      <hr />
      <div>
        <div>
          【参考答案】：
          <el-button type="danger" @click="isShowVideo = true"
            >视频答案预览</el-button
          >
        </div>
        <video v-if="isShowVideo" controls :src="tableDate.videoURL">
          <img src="" alt="" />
        </video>
      </div>
      <hr />
      <div>【答案解析】：{{ tableDate.answerID }}</div>
      <hr />
      <div>【题目备注】：{{ tableDate.remarks }}</div>
      <div slot="footer">
        <el-button type="primary" @click="closeDialogFn">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { toDifficulty } from '@/filters'
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: {
    data: {},
    closeDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      tableDate: {},
      isRight: 1,
      isShowVideo: false
    }
  },
  watch: {
    closeDialog: {
      handler: function () {
        if (this.closeDialog === true) {
          this.getDetail()
        }
      },
      deep: true
    }
  },

  methods: {
    closeDialogFn () {
      this.$emit('onClose', false)
    },
    async getDetail () {
      const res = await detail(this.data)
      this.tableDate = res.data
      console.log(124)
      console.log(this.tableDate)
    }
  }
}
</script>

<style scoped lang="less">
.container_header_row {
  margin-top: 20px;
}
.container_header_row2 {
  margin-top: 40px;
  padding-bottom: 10px;
}
.radio_div {
  margin: 20px 0;
  display: block;
}
</style>
